<template>
  <div>
    <BasicTable @register="registerTable">
      <template #toolbar>
        <a-button type="primary" @click="handleExport">导出</a-button>
        <Popconfirm
          title="确定要删除吗"
          ok-text="确认"
          cancel-text="取消"
          @confirm="handleBatchDeletUser"
        >
          <a-button type="primary">批量删除</a-button>
        </Popconfirm>
      </template>

      <template #prices="{ record }">
        <span v-if="record.province == '伦敦'">£</span><span v-else>$</span>{{ record.prices }}
      </template>
      <template #province="{ record }"> {{ record.province }}/{{ record.area }} </template>
      <template #action="{ record, column }">
        <TableAction :actions="createActions(record, column)" />
      </template>
    </BasicTable>
    <!-- 查看详情 -->
    <Modal @register="registerModal" @success="handleSuccess" />
    <!-- 驳回 -->
    <ApplicationModal @register="registerModal1" @successModel="handleSuccess" />
    <!-- SEO配置 -->
    <SEOModal @register="registerSEOConfigModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, reactive } from 'vue';
  import {
    ActionItem,
    BasicColumn,
    BasicTable,
    EditRecordRow,
    FormSchema,
    useTable,
    TableAction,
  } from '/@/components/Table';
  import { ListApi, DeleteApi, EditApi, ExportApi } from '/@/api/housingManag/index';
  import { onlineStatusTypenew } from '/@/assets/dic';
  import formatDic from '/@/utils/formatDic';
  import { UserItem } from '/@/api/user/userModel';
  import Modal from './modal.vue';
  import { useModal } from '/@/components/Modal';
  import ApplicationModal from './applicationModal.vue';
  import { Popconfirm } from 'ant-design-vue';
  import { downloadFile } from '/@/utils/file/download';
  import SEOModal from '../../rentManage/personalListings/SEOModal.vue';
  const columns: BasicColumn[] = [
    {
      title: '昵称',
      dataIndex: 'nickName',
    },
    {
      title: '手机号',
      dataIndex: 'account',
    },
    {
      title: '标题',
      dataIndex: 'title',
    },
    {
      title: '期望售价',
      dataIndex: 'prices',
      slots: { customRender: 'prices' },
    },
    {
      title: '微信',
      dataIndex: 'wechat',
    },
    {
      title: '电话',
      dataIndex: 'phone',
    },
    {
      title: '邮箱',
      dataIndex: 'email',
    },
    {
      title: '发布时间',
      dataIndex: 'createTime',
    },
    {
      title: '面积',
      dataIndex: 'dwellingArea',
    },
    {
      title: '区域位置',
      dataIndex: 'province',
      slots: { customRender: 'province' },
    },
    {
      title: '状态',
      dataIndex: 'isUse',
      format: formatDic(onlineStatusTypenew),
    },
    {
      title: '是否首页展示',
      dataIndex: 'showHome',
    },
    {
      title: '是否置顶',
      dataIndex: 'showTop',
    },
  ];

  const colProps = {
    span: 6,
  };
  const schemas: FormSchema[] = [
    {
      label: '发布者昵称：',
      field: 'nickName',
      component: 'Input',
      colProps,
    },
    {
      label: '标题：',
      field: 'title',
      component: 'Input',
      colProps,
    },
    {
      label: '状态：',
      field: 'isUse',
      component: 'Select',
      componentProps: {
        options: onlineStatusTypenew,
      },
      colProps,
    },
    {
      label: '区域：',
      field: 'city',
      component: 'AreaCascader',
      colProps,
    },
    {
      field: 'createTime',
      label: '时间：',
      component: 'RangePicker',
      componentProps: {
        valueFormat: 'YYYY-MM-DD',
      },
      colProps,
    },
    {
      field: 'isShowHome',
      label: '是否首页展示：',
      component: 'Select',
      componentProps: {
        placeholder: '请选择',
        options: [
          { label: '是', value: '是' },
          { label: '否', value: '否' },
        ],
      },
      colProps,
    },
    {
      field: 'isTopping',
      label: '是否置顶：',
      component: 'Select',
      componentProps: {
        placeholder: '请选择',
        options: [
          { label: '是', value: '是' },
          { label: '否', value: '否' },
        ],
      },
      colProps,
    },
  ];

  export default defineComponent({
    name: 'AverageUser',
    components: {
      BasicTable,
      TableAction,
      ApplicationModal,
      Modal,
      Popconfirm,
      SEOModal,
    },
    setup() {
      let formStatus = reactive({});
      const [registerModal, { openModal }] = useModal();
      const [registerModal1, { openModal: openModal1 }] = useModal();
      const [registerSEOConfigModal, { openModal: openSEOConfigModal }] = useModal();
      const [registerTable, { reload, getSelectRows }] = useTable({
        api: ListApi,
        useSearchForm: true,
        clickToRowSelect: false,
        rowSelection: {
          type: 'checkbox',
        },
        columns,
        formConfig: {
          schemas: schemas,
          labelWidth: 120,
        },
        beforeFetch(params) {
          if (Array.isArray(params.city)) {
            params.area = params.city[1];
            params.city = params.city[0];
          }
          if (Array.isArray(params.createTime)) {
            params.createTime = params.createTime.join('~');
          }
        },
        handleSearchInfoFn(params) {
          if (Array.isArray(params.city)) {
            params.area = params.city[1];
            params.city = params.city[0];
          }
          if (Array.isArray(params.createTime)) {
            params.createTime = params.createTime.join('~');
          }
          formStatus = params;
        },
        actionColumn: {
          width: 400,
          title: '操作',
          fixed: 'right',
          dataIndex: 'action',
          slots: { customRender: 'action' },
        },
        afterFetch(params) {
          params.forEach((item) => {
            if (item.wechat === null) {
              item.wechat = '/';
            }
            if (item.phone === null) {
              item.phone = '/';
            }
            if (item.email === null) {
              item.email = '/';
            }
          });
        },
      });

      function handleSuccess() {
        console.log(11111111111, '成功');
        reload();
      }
      //打开驳回
      function handleCreate(record) {
        openModal(true, {
          record,
          isUpdate: false,
        });
      }
      // 改变用户的使用状态
      function handleChangeStatus(record: UserItem) {
        record.isUse = record.isUse === 0 || record.isUse === 2 ? 1 : 0;
        EditApi(record).then((_) => {
          reload();
        });
      }

      // 删除用户
      function handleDeletUser(ids: number | number[]) {
        console.log(ids);
        DeleteApi(ids).then((_) => {
          reload();
        });
      }
      //驳回 reject
      function rejectStatus(record: UserItem) {
        record.isUse = 3;
        EditApi(record).then((_) => {
          reload();
        });
      }
      // 拿到需要批量删除的id
      function handleBatchDeletUser() {
        const selectRows = getSelectRows();
        const ids = selectRows.map((item) => item.id);
        handleDeletUser(ids);
      }

      function createActions(record: EditRecordRow, _: BasicColumn): ActionItem[] {
        // return [
        //   {
        //     label: '查看',
        //     color: 'success',
        //     onClick() {
        //       openModal(true, {
        //         record,
        //       });
        //     },
        //   },
        //   {
        //     label: record.isUse === 0 || record.isUse === 2 ? '上线' : '下线',
        //     onClick: handleChangeStatus.bind(null, record as UserItem),
        //   },
        //   {
        //     label: '驳回',
        //     color: 'error',
        //     // onClick: rejectStatus.bind(null, record as UserItem),
        //     disabled: record.isUse === 2 ? false : true,
        //     onClick() {
        //       openModal1(true, {
        //         record,
        //       });
        //     },
        //   },
        //   {
        //     label: '删除',
        //     color: 'error',
        //     popConfirm: {
        //       title: '确定要删除吗！',
        //       confirm() {
        //         handleDeletUser(record.id);
        //       },
        //     },
        //   },
        // ];
        if (record.isUse == 2) {
          return [
            {
              label: '查看',
              color: 'success',
              onClick() {
                openModal(true, {
                  record,
                });
              },
            },
            {
              label: '上线 ',
              onClick: handleChangeStatus.bind(null, record as UserItem),
            },
            // {
            //   label: '驳回',
            //   color: 'error',
            //   onClick() {
            //     openModal1(true, {
            //       record,
            //     });
            //   },
            // },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '确定要删除吗！',
                confirm() {
                  handleDeletUser(record.id);
                },
              },
            },
          ];
        } else if (record.isUse == 3) {
          return [
            {
              label: '查看',
              color: 'success',
              onClick() {
                openModal(true, {
                  record,
                });
              },
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '确定要删除吗！',
                confirm() {
                  handleDeletUser(record.id);
                },
              },
            },
          ];
        } else {
          return [
            {
              label: 'SEO配置',
              onClick() {
                openSEOConfigModal(true, {
                  record,
                });
              },
            },
            {
              label: '查看',
              color: 'success',
              onClick() {
                openModal(true, {
                  record,
                });
              },
            },
            {
              label: '推荐到首页',
              color: 'warning',
            },
            {
              label: '置顶',
              color: 'error',
            },
            {
              label: record.isUse === 0 ? '上线' : '下线',
              onClick: handleChangeStatus.bind(null, record as UserItem),
            },
            {
              label: '删除',
              color: 'error',
              popConfirm: {
                title: '确定要删除吗！',
                confirm() {
                  handleDeletUser(record.id);
                },
              },
            },
          ];
        }
      }
      // 导出
      async function handleExport() {
        const res = await ExportApi(formStatus);
        downloadFile(res.msg);
      }
      return {
        registerTable,
        registerModal1,
        openModal1,
        handleCreate,
        createActions,
        handleBatchDeletUser,
        registerModal,
        handleSuccess,
        handleExport,
        registerSEOConfigModal,
      };
    },
  });
</script>
<style lang="less" scoped></style>
